import React from 'react';
import { Input } from 'antd';

const ItemInput = (props) => {
  const {
    className = '',
    label = '',
    required = false,
    value,
    onChange,
    onBlur,
    validate,
    maxLength = -1,
  } = props;
  const { valid, msg } = validate ? validate(value) : { valid: true };
  return (
    <div className={className}>
      <div className={`item__lable ${required ? 'item__lable_required' : ''}`}>{label}</div>
      <Input
        {...(maxLength !== -1 ? { maxLength } : {})}
        value={value}
        placeholder={`请输入${label}`}
        onChange={ev => { if (onChange) onChange(ev.target.value); }}
        onBlur={ev => { if (onBlur) onBlur(ev.target.value); }}
        style={{...(
          valid ? {} : { borderColor: '#f5222d' }
        )}}
      />
      { !valid ? (
        <div style={{fontSize: 12, color: "#f5222d"}}>{msg}</div>
      ) : null
      }
    </div>
  );
}
export default ItemInput;